<template>
    <div>
        <el-button @click="router.push('/product/add')">新增</el-button>
        <el-table :data="tableData">
            <el-table-column prop="title" label="产品名称" />
            <el-table-column prop="price" label="产品价格" />
            <el-table-column prop="stock" label="产品库存" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="edit(row.id)">编辑</el-button>
                    <el-button @click="del(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :total="100" @current-change="fetchData" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const tableData = ref([])

onMounted(() => {
    fetchData()
})

const fetchData = async (page = 1) => {
    const res = await http.get('/product/list', {
        params: {
            page,
            limit: 10
        }
    })
    tableData.value = res.data.data
}

const edit = (id) => {
    router.push(`/product/edit/${id}`)
}

const del = (id) => {
    ElMessageBox.confirm('确定删除该产品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await http.delete(`/product/del/${id}`)
        fetchData()
    })
}
</script>
